<style scoped lang="less">
.overflow2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.headth {
  height: 30px;
  width: 120px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;

}

.row1 {
  height: 30px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &.state_50 {
    opacity: 0.4;
  }

  //完成
  &.state_3 {
    background: greenyellow;

  }

}

.headth.active {
  background: yellow;
}
</style>
<template>
  <div>

    <div style="margin-bottom: 10px;;">
      <span @click="() => { triggercurrentweek('上') }">上</span>
      <span style="padding:0 10px;" @click="() => { triggercurrentweek() }">当</span>
      <span @click="() => { triggercurrentweek('下') }" style="padding-right: 10px;;">下</span>
      <weekdatepicker placeholder="预计结束时间 过滤" :props_targetTimeStart="queryParams.plan_endtime_start"
        :props_targetTimeEnd="queryParams.plan_endtime_end" @change="_range => {
        queryParams.plan_endtime_start = _range?.startTime
        queryParams.plan_endtime_end = _range?.endTime
        queryParams.pageNum = 1;
        getInfoList()
      }" :clearable="true"></weekdatepicker>
    </div>


    <div>
      <section class="rows" style="display: flex;align-items: center;">
        <div :class="`headth ${new Date().getDate() == 1 ? 'active' : ''}`">周一</div>
        <div :class="`headth ${new Date().getDate() == 2 ? 'active' : ''}`">周二</div>
        <div :class="`headth ${new Date().getDate() == 3 ? 'active' : ''}`">周三</div>
        <div :class="`headth ${new Date().getDate() == 4 ? 'active' : ''}`">周四</div>
        <div :class="`headth ${new Date().getDate() == 5 ? 'active' : ''}`">周五</div>
        <div :class="`headth ${new Date().getDate() == 6 ? 'active' : ''}`">周六</div>
        <div :class="`headth ${new Date().getDate() == 7 ? 'active' : ''}`">周日</div>
      </section>
      <div>

        <div :class="`row1 rowwidthid_${item?.id} state_${item?.state}`" v-for="(item, index) in dataList"
          :style="`position:relative;width:${(item.plan_work_time || 1) * 120}px;`">
          <el-tooltip class="box-item" effect="dark" :content="item.taskcontent" placement="top-start">
            <div @click="() => triggerModify(item)" style="cursor: pointer;">
              <span>{{ item.taskname }}</span>
            </div>
          </el-tooltip>
        </div>

      </div>
    </div>


    <div style="margin-top: 100px;;">
      <iframe src="/#/tb_task" frameborder="0"
width="100%" height="666px;"
></iframe>
    </div>

  </div>
</template>
<script setup>
import jquery from 'jquery';
import FormDialog from '../../components/FormDialog';
import { alertConfirm, alertWithPaylod } from '@/utils/alertUtils';
import axios from 'axios';
import { ref, onMounted } from 'vue';
import moment from 'moment';
import weekdatepicker from '@/components/erp-date-picker/weekdatepicker.vue';


const dataList = ref([]);
const total = ref(0);
const queryParams = ref({
  pageNum: 1, pageSize: 10,
  plan_endtime_start: '',
  plan_endtime_end: '',
});
const loading = ref(false);

function resttime(timestr) {
  const today = moment();
  const future = moment(timestr);
  const diff = future.diff(today, 'days');

  return diff;
}

async function getInfoList() {
  loading.value = true;
  var result = await axios
    .post('/api/tb_task/apis', {
      _name: 'getlist',
      module: '',
      ...queryParams.value,
    })
    .then((res) => res.data);
  total.value = result?.count || result?.total;
  dataList.value = result?.data || [];
  loading.value = false;


  setTimeout(() => {
    fixedCss();
  }, 10);
}

function fixedCss() {
  for (let i = 0; i < dataList.value.length; i++) {
    var dataitem = dataList.value[i];
    var endtime = dataitem.plan_endtime;
    var difftime = dataitem.plan_work_time;
    var date = moment(endtime).date();
    console.log('=>(taskweek.vue:117) date', endtime, date);
    var startDate = moment(endtime).add(-1 * difftime, 'd').date();

    var left = startDate * 120;
    jquery(`.rowwidthid_${dataitem?.id}`).css('left', left);
  }

  /*  jquery('.row1').each((index,item)=>{
      var preitem$=jquery(item).prev()
      var right= preitem$ .offset()?.left+preitem$ .width();
      console.log("=>(taskweek.vue:110) right", right);
      jquery(item).css('left',right)
   })*/
}

async function triggerWeek() {

}

async function triggerModify(row) {
  var result = await FormDialog({
    closeOnClickModal: false,
    title: '管理',
    width: '1000px',
    data() {
      return { ...row };
    },
    components: {
      modify: () => import('./modify.vue'),
    },
  });
  console.log('result :', result);
  if (result?.success) {
    getInfoList();
  }
}

async function triggerdeleteone(row) {
  await alertConfirm('确定删除吗？');
  var result = await axios
    .post('/api/tb_task/apis', {
      _name: '删除',
      module: '',
      ...row,
    })
    .then((res) => res.data);
  alertWithPaylod(result);
  if (result?.success) {
    getInfoList();
  }
}

function triggercurrentweek(action) {
  if (action == '上') {
    var current = queryParams.value.plan_endtime_start || new Date()
    current = moment(current).add(-1, 'week')
    queryParams.value.plan_endtime_start = dateFormatYYYYMMDDHHmmss(moment(current).startOf('week'))
    queryParams.value.plan_endtime_end = dateFormatYYYYMMDDHHmmss(moment(current).endOf('week'))

  } else if (action == '下') {
    var current = queryParams.value.plan_endtime_start || new Date()
    current = moment(current).add(1, 'week')
    queryParams.value.plan_endtime_start = dateFormatYYYYMMDDHHmmss(moment(current).startOf('week'))
    queryParams.value.plan_endtime_end = dateFormatYYYYMMDDHHmmss(moment(current).endOf('week'))
  } else {
    //获取默认本周的
    queryParams.value.plan_endtime_start = dateFormatYYYYMMDDHHmmss(moment(new Date()).startOf('week'))
    queryParams.value.plan_endtime_end = dateFormatYYYYMMDDHHmmss(moment(new Date()).endOf('week'))
  }

  console.log('queryParams.plan_endtime_end :', queryParams.plan_endtime_end);

  getInfoList();

}

onMounted(() => {
  getInfoList();
});
</script>
